<template>
  <div>
    <div class="wrapper" @click.stop>
      <div class="block checkNotice">
        <span class="title">查看公告</span>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            prop="title"
            label="公告标题"
            width="90"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="publisher"
            label="发布者"
            width="90"
            align="center"
          />
          <el-table-column
            prop="content"
            label="公告内容"
            width="180"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="time"
            label="发布时间"
            width="180"
            align="center"  
            show-overflow-tooltip
          />
          <el-table-column prop="view" label="查看" width="90" align="center">
            <template #default="scope">
              <el-button
                plain
                @click="handleCheck(scope.$index)"
                type="primary"
                >查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button
          type="primary"
          plain
          style="margin-top: 20px"
          @click="CheckReportClick"
          >关闭</el-button
        >
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="500"
      @close="dialogVisible = false"
    >
      <template #header>
        <div class="my-header">
          <h4 >{{ filterData.title }}</h4>
        </div>
      </template>
      <span >{{ filterData.content }}</span>
    </el-dialog>
  </div>
</template>

<script setup>
//   import { ElTable, ElTableColumn, ElButton } from 'element-plus'
import { Overlay } from 'vant'
import { ref, toRefs } from 'vue'
import { useMapgisStore } from '@/stores/mapgis.js'
const { CheckReportClick, handleCheck } = useMapgisStore()
const { tableData, filterData,  dialogVisible } = toRefs(useMapgisStore())

</script>

<style scoped>
.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.5);
}

.title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 10px;
}

.checkNotice {
  position: fixed;
  z-index: 101;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  background-color: aliceblue;
}

.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}
</style>
